<script setup>
import Header from './components/layer/header.vue'
import Left from './components/layer/left.vue'
import Right from './components/layer/right.vue'
import Map from "./components/map.vue";
import Bottom from "./components/layer/bottom.vue";
import Yimo from './components/yimo.vue';
import Ermo from './components/ermo.vue';
import { reactive, ref } from 'vue'
import { mainStore } from '@/store/index';
const store = mainStore();
store.getMockData();
let index = ref(1);
let MapRef = ref(null);
let changeIndex = (Index) => {
  index.value = Index;
}
const getAssetURL = (image) => {
  // 参数一: 相对路径
  // 参数二: 当前路径的URL
  return new URL(`../../assets/${image}`, import.meta.url).href
}
const activateControlComponenet = (index) => {
  MapRef.value.colorAtionRemoveAll();
  ControlComponent.forEach((item, i) => {
    if (index === i) {
      if (item.activate) {
        return item.activate = false;
      }
      item.activate = true;
      switch (index) {
        case 0:
          MapRef.value.getAreaPointFn();
          break;
        case 1:
          MapRef.value.videoPointFn();
          break;
        case 2:
          MapRef.value.setPersonnel();
          break;
      }
    } else {
      item.activate = false;
    }
  })
}
let ControlComponent = reactive(
  [
    {
      title: '四色图',
      activate: false,
      unactivateImg: getAssetURL('icon5.png'),
      activateImg: getAssetURL('icon5Activate.png')
    },
    {
      title: '监控',
      activate: false,
      unactivateImg: getAssetURL('monitoring.png'),
      activateImg: getAssetURL('monitoringActivate.png')
    },
    {
      title: '人员定位',
      activate: true,
      unactivateImg: getAssetURL('personnel.png'),
      activateImg: getAssetURL('personnelActivate.png')
    }
  ]
)
</script>

<template>
  <div id="largeScreen">
    <Header></Header>
    <div class="content">
      <div class="switchButton">
        <div :class="{ activate: index === 1 }" @click="changeIndex(1)">榆林处理厂</div>
        <div :class="{ activate: index === 2 }" @click="changeIndex(2)">第一末站</div>
        <div :class="{ activate: index === 3 }" @click="changeIndex(3)">第二末站</div>
      </div>
      <div class="ControlComponent">
        <el-tooltip effect="dark" :content="item.title" placement="left" v-for="(item, index) in ControlComponent"
          :key="item.title">
          <img @click="activateControlComponenet(index)" :src="item.activate ? item.activateImg : item.unactivateImg"
            alt="">
        </el-tooltip>
      </div>
      <Left></Left>
      <Map ref="MapRef" v-if="index === 1"></Map>
      <Yimo v-if="index === 2"></Yimo>
      <Ermo v-if="index === 3"></Ermo>
      <Bottom></Bottom>
      <Right></Right>
    </div>
  </div>
</template>

<style scoped lang="scss">
#largeScreen {
  width: 100%;
  height: 100%;
  background-image: url('@/assets/background.png');
  background-size: 100% 100%;
  position: relative;
}



#largeScreen .content {
  width: 100%;
  height: calc(100% - .4323rem);
  box-sizing: border-box;
  padding: .1042rem;
  position: relative;
  overflow: hidden;

  .ControlComponent {
    width: .2083rem;
    height: .6rem;
    position: absolute;
    left: 72.5%;
    top: 53%;
    z-index: 1;
    background-color: rgba(2, 5, 22, 0.7);
    border-radius: 10px;
    cursor: pointer;
  }

  .switchButton {
    position: absolute;
    width: 1.6625rem;
    height: .2083rem;
    left: 58%;
    display: flex;
    justify-content: space-between;

    >div {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 33.33%;
      color: #fff;
      font-size: .1042rem;
      cursor: pointer;
      z-index: 1;
    }

    .activate {
      background-image: url('@/assets/button.png');
      background-size: 100% 100%;
      font-size: 0.09rem;
    }
  }

  .ControlComponent {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
}
</style>
